import React from "react";
import eventBus from "./utils/eventBus";

import Hello from "./Hello";
import World from "./World";

class App extends React.Component {
  state = {
    showHello: true,

    age: 18,
  };

  render() {
    const { showHello, age } = this.state;

    return (
      <div>
        <h1>App</h1>

        <button onClick={() => eventBus.emit("abcd")}>触发 abcd 消息</button>
        <button
          onClick={() =>
            this.setState((prevState) => ({
              showHello: !prevState.showHello,
            }))
          }
        >
          Toggle Hello
        </button>
        <button
          onClick={() =>
            this.setState((prevState) => ({ age: prevState.age + 1 }))
          }
        >
          {age}
        </button>
        <button onClick={() => this.forceUpdate()}>调用强制更新</button>

        <hr />

        {showHello && <Hello age={age} />}

        <hr />

        <World name="张三" age={age} />

        <hr />

        <div style={{ height: 2000 }}></div>
      </div>
    );
  }

  componentDidMount() {
    console.log("App componentDidMount");
  }
}

export default App;
